<!-- 底部导航栏 -->
<template>
  <div class="tabbar">
    <ul class="tabbar-wrapper">
      <li
        v-for="(item, t) in tabOptions"
        :key="t"
        class="tabbar-item"
        :class="t == active ? 'activeBar' : ''"
        @click="tabHandle(item, t)"
      >
        <p>
          <i :class="item.icon" :style="{ fontSize: item.ftSize + 'px' }"></i>
        </p>
        <p class="tabbar-name">{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      tabOptions: [
        {
          id: "0",
          path: "/market",
          name: "Market",
          ftSize: 22,
          icon: "iconfont icon-Markt",
        },
        {
          id: "1",
          path: "/activity",
          name: "Activity",
          ftSize: 22,
          icon: "iconfont icon-huodong",
        },
        {
          id: "2",
          path: "/team",
          name: "Team",
          ftSize: 22,
          icon: "iconfont icon-team",
        },
        {
          id: "3",
          path: "/my",
          name: "My",
          ftSize: 22,
          icon: "iconfont icon-my",
        },
      ],
    };
  },
  mounted() {
    const path = this.$route.path;
    this.tabOptions.forEach((item, i) => {
      if (item.path === path) {
        this.active = i;
      }
    });
  },
  methods: {
    tabHandle(item, t) {
      this.active = t;
      this.$router.push(item.path);
    },
  },
  watch:{
    $route:{
      handler(val,oldval){
        const path = this.$route.path;
        this.tabOptions.forEach((item, i) => {
          if (item.path === path) {
            this.active = i;
          }
        });
      },
      // 深度观察监听
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
.activeBar {
  color: #4a67f5 !important;
}
.tabbar {
  width: 100%;
  height: 49px;
  background: #ffffff;
  position: fixed;
  padding: 0 10px;
  box-sizing: border-box;
  z-index: 10;
  left: 0;
  bottom: 0;
  .tabbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .tabbar-item {
      padding: 5px 0;
      text-align: center;
      font-size: 11px;
      font-weight: 500;
      color: #aeb2be;
      .tabbar-name {
        margin: 3px 0 0 0;
      }
    }
  }
}
</style>